<template>
	<view class="goodsPage">
		<view class="goodsImgBox">
			<imageSwiper class="goodsImg" :previewImage="true" :imgs="dataInfo.activityFile"></imageSwiper>
		</view>
		<view class="activityInfoContent">
			<view class="activityInfoTitle">{{dataInfo.activityName}}</view>
			<view class="activityInfoTypeBox">
				<view class="activityInfoType-left">
					<view class="activeCycleText">{{dicts.event_type[dataInfo.activityType].label}}</view>
					<!-- <view class="activeType">一次性</view> -->
				</view>
				<view class="activityInfoType-right">积分：{{dataInfo.activityScore}}</view>
			</view>
			<view class="goodsDescribe">
				<mp-html :content="dataInfo.details||dataInfo.remark" />
			</view>
			<view class="submitBtnBox">
				<view class="submitBtn" v-if="dataInfo.isEnroll&&dataInfo.activityType!=1"
					@click="modalOpen('bmModal')">
					报名
				</view>
				<!-- <view class="submitBtn" v-else-if="dataInfo.isCard&&dataInfo.activityType!=1"
					@click="modalOpen('clockIn')">
					打卡
				</view> -->
				<view class="submitBtn" v-if="dataInfo.isEnroll&&dataInfo.activityType==1"
					@click="modalOpen('clockIn')">
					参与问卷
				</view>

			</view>
			<!-- <view class="participateInfoBox" style="margin-top:32rpx ;">
				<uqrcode class="QRCode" ref="uqrcode" sizeUnit="rpx" size="330" canvas-id="qrcode" :value="QRCodeUrl"
					:options="{ margin: 10 }">
				</uqrcode>

			</view> -->

		</view>
		<u-modal class="bm" :show="clockInShow" :zoom="false" :showConfirmButton="false">
			<view class="contentBox">
				<view class="titleBox">
					<view class="title">{{dataInfo.activityType!=1?'活动打卡':'参与问卷'}}</view>
					<view class="closeBtn" @click="closeModal('clockIn')">
						<uni-icons type="closeempty" size="48rpx"></uni-icons>
					</view>
				</view>
				<view class="modalContentBox">
					<view class="modalRow" style="margin-top: 36rpx;">
						<view class="">
							<view class="rowTitle">报名人</view>
							<view class="rowText">{{userInfo.nickName}}</view>
						</view>
						<view class="">
							<view class="rowTitle">联系方式</view>
							<view class="rowText">{{userInfo.phonenumber}}</view>
						</view>
					</view>
					<dynamicForms ref="dkForm" :uploadImg="dataInfo.activityType!=1" @submit="dkSubmit" btnText="提交">
					</dynamicForms>
				</view>
			</view>
		</u-modal>
		<u-modal class="bm" :show="bmModalShow" :zoom="false" :showConfirmButton="false">
			<view class="contentBox" v-if="userInfo">
				<view class="titleBox">
					<view class="title">{{dataInfo.activityType!=1?'活动报名':'参与问卷'}}</view>
					<view class="closeBtn" @click="closeModal('bmModal')">
						<uni-icons type="closeempty" size="48rpx"></uni-icons>
					</view>
				</view>
				<view class="modalContentBox">
					<view class="modalRow" style="margin-top: 36rpx;">
						<view class="">
							<view class="rowTitle">报名人</view>
							<view class="rowText">{{userInfo.nickName}}</view>
						</view>
						<view class="">
							<view class="rowTitle">联系方式</view>
							<view class="rowText">{{userInfo.phonenumber}}</view>
						</view>
					</view>
					<dynamicForms ref="formRef" @submit="addSubmit" btnText="提交"></dynamicForms>
				</view>
			</view>
		</u-modal>
		<u-modal :show="rzShow" title="提示" content="请先提交认证申请成为人才!" confirmText="去提交" showCancelButton cancelText="取消"
			@confirm="toRZ" @close="RZX" @cancel="RZX"></u-modal>
	</view>
</template>

<script>
	import * as activityApi from "@/api/activity.js"
	import * as systemApi from "@/api/system.js"
	import * as activityRegistrationApi from "@/api/activityRegistration.js"
	export default {
		data() {
			return {
				clockInShow: false,
				bmModalShow: false,
				rzShow: false,
				userInfo: {
					userType: ''
				},
				dataInfo: {
					activityFile: "",
					activityId: '',
					activityName: "",
					activityType: "0",
					createBy: null,
					createTime: "2024-02-20 16:46:59",
					eliteType: "1",
					endTime: "2024-03-01",
					isPublic: "0",
					remark: "<p>xxxx</p>",
					source: "xxxx",
					startTime: "2024-02-29",
					updateBy: null,
					updateTime: "2024-02-29 11:01:02",
					enrollUserNum: 0,
					address: '',
					enrollUserList: []
				},
				QRCodeUrl: '',
				formData: {
					phone: '',
					wx: '',
					height: '',
					weight: ''
				},
				formRuls: {
					phone: '',
					wx: '',
					height: '',
					weight: ''
				},
				dicts: {
					event_type: {},
				},
				dictList: {
					event_type: [],
				},
			};
		},
		onLoad(options) {
			console.log(options);
			this.infoId = options.id

			this.getDictDataList('event_type')
		},
		onShow() {
			this.getInfo()
			this.$store.dispatch('userBaseInfo').then(res => {
				this.userInfo = res.user
				console.log(res);
			})
			// this.userInfo = this.$store.getters.my_userInfo
			console.log(this.userInfo);
		},
		methods: {
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					systemApi.dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = {
								label: item.dictLabel,
								color: `rgb(${item.remark||'57,137,248'})`,
								background: `rgba(${item.remark||'57,137,248'},0.1)`
							}
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						this.dictList[dictType] = keyValues
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},
			toRZ() {
				uni.$u.debounce(() => {
					this.$navTo(`pages/common/authentication/authentication`)
					this.rzShow = false
				}, 500)
			},
			RZX() {
				this.rzShow = false
			},
			dkSubmit(formJson, picture) {
				let dataObj = null
				if (this.dataInfo.activityType == 1) {
					dataObj = {
						activityId: this.infoId,
						information: JSON.stringify(formJson),
						submission: JSON.stringify(formJson),
					}
				} else {
					const urls = JSON.parse(picture).map(item => item.url)
					dataObj = {
						activityId: this.infoId,
						information: JSON.stringify(formJson),
						submission: JSON.stringify(formJson),
						picture: urls.toString()
					}
				}

				uni.$u.throttle(activityRegistrationApi.apmParticipation(dataObj).then(res => {
					this.$toast(this.dataInfo.activityType == 1 ? '参与成功' : '打卡成功')
					this.closeModal('clockIn')
					setTimeout(() => {
						this.getInfo()
					}, 600)
				}), 500)
			},
			addSubmit(formJson) {
				const dataObj = {
					activityId: this.infoId,
					information: JSON.stringify(formJson)
				}
				uni.$u.throttle(activityRegistrationApi.addenroll(dataObj).then(res => {
					this.$toast('报名成功')
					this.closeModal('bmModal')
					setTimeout(() => {
						this.getInfo()
					}, 600)
				}), 500)
			},
			getInfo() {
				activityApi.activityId(this.infoId).then(({
					data
				}) => {
					this.dataInfo = data
					// this.QRCodeUrl =
					// 	`https://elite.wzheiying.com/elite-rc/pages/activity/activityInfo/activityInfo?id=${data.activityId}`
					this.QRCodeUrl =
						`http://192.168.1.188:8080/elite-rc/pages/activity/activityInfo/activityInfo?id=${data.activityId}`
				})
			},
			checkForm() {
				const formData = this.formData
				let formRuls = this.formRuls
				if (!uni.$u.test.mobile(formData.phone)) {
					formRuls.phone = "请输入正确的手机号码"
					return false
				} else {
					formRuls.phone = ""
				}
				if (uni.$u.test.isEmpty(formData.wx)) {
					formRuls.wx = "请输入微信账号"
					return false
				} else {
					formRuls.wx = ""
				}
				if (uni.$u.test.isEmpty(formData.height)) {
					formRuls.height = "请输入身高"
					return false
				} else {
					formRuls.height = ""
				}
				if (uni.$u.test.isEmpty(formData.weight)) {
					formRuls.weight = "请输入体重"
					return false
				} else {
					formRuls.weight = ""
				}
				return true
			},
			submit() {

				if (!this.checkForm()) {
					return
				}
			},
			closeModal(showName) {
				this[showName + 'Show'] = false
				if (showName == 'bmModal') {
					let formData = this.formData
					let formRuls = this.formRuls
					for (let key in formData) {
						console.log(key);
						formData[key] = ''
					}
					for (let key in formRuls) {
						formRuls[key] = ''
					}
				}
			},
			modalOpen(showName) {
				const that = this
				// if (this.userInfo.userType == "yk") {
				// 	this.rzShow = true
				// } else {
				that[showName + 'Show'] = true
				if (showName == 'bmModal') {
					that.$nextTick(() => {
						that.$refs.formRef.initData(this.dataInfo.formJson)
					})
				} else {
					that.$nextTick(() => {
						that.$refs.dkForm.initData(this.dataInfo.cardJson)
					})
				}
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/utils/viewScss/info.scss";

	page,
	body {
		background-color: #fff;
	}

	/deep/ .bm .u-modal__content {
		padding: 30rpx 0 0 0 !important;
	}
</style>